<template>
  <div class="bar">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:14px;border-left:6px solid #409eff;padding-left:6px;">阀门数量统计</span>
      </div>
      <div class="content">
        <ve-histogram :data="chartData" :height="chartHeight" :extend="chartExtend" />
      </div>
    </el-card>
    <div class="h12" />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:14px;border-left:6px solid #f56c6c;padding-left:6px;">系统每日灌溉量</span>
      </div>
      <div class="content">
        <ve-histogram :data="chartDataIrrigation" :height="chartHeight" :extend="chartExtendIrrigation" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCurrentDate, getNextDate, getDaterange } from '@/utils'
export default {
  props: {
    dashboardData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chartHeight: '347px',
      chartExtend: {
        series: {
          showSymbol: false,
          stack: 'intelirri',
          barMaxWidth: 20
        },
        color: ['#fc8452', '#409eff', '#67c23a'],
        grid: {
          left: '2%',
          right: '2%',
          bottom: '0%',
          top: '18%',
          containLabel: true
        }
      },
      chartExtendIrrigation: {
        series: {
          showSymbol: false,
          stack: 'intelirri',
          barMaxWidth: 20
        },
        color: ['#67c23a', '#fc8452', '#409eff'],
        grid: {
          left: '2%',
          right: '2%',
          bottom: '0%',
          top: '18%',
          containLabel: true
        }
      }
    }
  },
  computed: {
    chartData() {
      return {
        columns: ['name', '数量'],
        rows: this.dashboardData.fourth
      }
    },
    chartDataIrrigation() {
      const res = {
        columns: ['日期', '灌溉量'],
        rows: []
      }
      const arr = getDaterange([getNextDate(getCurrentDate(), -7), getCurrentDate()])
      arr.forEach((item) => {
        res.rows.push({ '日期': item, '灌溉量': 0 })
      })

      return res
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.bar{
  position:absolute;
  border-top:1px solid #ddd;
  width:400px;
  padding:12px;
  height:100%;
  background:white;
  right:0;
  top:0;
  z-index:1999;
}
.flex-1{
  text-align:center;
  dt{
    height:32px;
    line-height:32px;
    &.icon-dikuai{
      font-size:24px;
      color:#409eff;
    }
    &.icon-device{
      font-size:28px;
      color:#67c23a;
    }
    &.icon-trouble{
      font-size:28px;
      color:#f56c6c;
    }
  }
  dd{
    font-size:14px;
    &.number{
      font-size: 18px;
      font-weight: 500;
      color: var(--color-95);
      margin: 10px 0;
    }
  }
}

</style>
